<template>
    <div>
      <div style="display: flex;">
        <UserInfo></UserInfo> 
        <div style="margin-right: 2%;"></div>
        <el-container direction="vertical">
            <div style="display: flex">
              <numberCard role="yiyuan" class="myCard" style="height: 90px"></numberCard> 
              <numberCard role="yiyuan" class="myCard" style="height: 90px"></numberCard>  
              <numberCard role="yiyuan" class="myCard" style="height: 90px"></numberCard>        
            </div>
            <div style="display: flex">
              <numberCard role="yiyuan2" class="myCard" style="height: 90px"></numberCard>
              <numberCard role="yiyuan" class="myCard" style="height: 90px"></numberCard>  
              <numberCard role="yiyuan" class="myCard" style="height: 90px"></numberCard>  
            </div>
          </el-container>
      </div>
      <div style="display: flex;">
        <Chart></Chart>
        <div style="margin-right: 2%;"></div>
        <el-calendar v-model="value">
        </el-calendar>
      </div>
  </div>
</template>

<script>
import UserInfo from '@/components/userInfo'
import Chart from '@/components/Chart'
import numberCard from '@/components/Num'
export default {
  components: {
    UserInfo,
    Chart,
    numberCard
  },
  data() {
    return {
      value: new Date()
    }
  },
}
</script>

<style scoped>
.el-calendar{
    width: 650px;
}
</style>
